<template>
  <!-- 人员审核 -->
  <el-dialog
    v-dialogDrag
    title="人员审核"
    :visible.sync="dialogVisible"
    class="dialogStyleMiddle"
    :before-close="cancel"
    :close-on-click-modal="false"
    append-to-body
  >
    <el-row>
      <el-form ref="form" :rules="rules" label-width="80px" :model="formData">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用户名称" prop="name">
              <el-input v-model="formData.name" disabled size="medium" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model="formData.idCard" disabled size="medium" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="formData.phone" disabled size="medium" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户性别" prop="sex">
              <label slot="label" v-html="`性&emsp;&emsp;别`" />
              <el-select :value="formData.sex" disabled style="width:100%">
                <el-option
                  v-for="item in sexOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户邮箱" prop="email">
              <el-input v-model="formData.email" disabled size="medium" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登录名称" prop="loginName">
              <el-input v-model="formData.loginName" disabled size="medium" />
            </el-form-item>
          </el-col>
          <el-col v-if="readonly" :span="12">
            <el-form-item label="通过审核" prop="checkStatus">
              <el-radio-group v-model="formData.checkStatus" :disabled="status === '0'">
                <el-radio label="0">是</el-radio>
                <el-radio label="1">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-if="status !== '0'" :span="24">
            <el-form-item v-if="formData.checkStatus !=='0'" :key="1" label="审核原因" :prop="'reason'">
              <el-input
                v-model="formData.reason"
                type="textarea"
                :rows="5"
                :maxlength="500"
              />
            </el-form-item>
            <el-form-item v-if="formData.checkStatus ==='0'" :key="2" label="审核原因">
              <el-input
                v-model="formData.reason"
                type="textarea"
                :rows="5"
                :maxlength="500"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="cancel">取 消</el-button>
      <el-button v-if="status !== '0'" size="medium" type="primary" @click="submitForm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { userAudit, userDetail } from '@/api/PersonalOffice/approvalManage/personApproval'
export default {
  name: 'CheckDialog',
  props: {
    readonly: {
      type: Boolean,
      default: true
    }
  },
  data() {
    const checkStatus = (rule, value, callback) => {
      if (value !== '0' && value !== '1') {
        callback(new Error('请选择'))
      } else {
        callback()
      }
    }
    return {
      /* 表单 start */
      dialogVisible: false,
      formData: {
        id: '',
        loginName: '',
        userType: '',
        idCard: '',
        phone: '',
        name: '',
        checkStatus: '0',
        reason: '',
        createTime: '',
        email: '',
        sex: ''
      },
      sexOptions: [
        { value: '0', label: '男' },
        { value: '1', label: '女' }
      ],
      typeOptions: [],
      rules: {
        reason: [{ required: true, message: '审核原因不能为空' }],
        checkStatus: [{ required: true, message: '审核不能为空', validator: checkStatus, trigger: 'change' }]
      },
      status: '' // 人员目前状态
    }
    /* 表单 end */
  },
  methods: {
    /* 新增/编辑弹层 start */
    // 初始化信息
    handleAdd(id, typeOptions) {
      this.dialogVisible = true
      this.resetForm('form')
      this.$nextTick(() => {
        this.typeOptions = typeOptions
        this.userDetail(id)
      })
    },
    // 获取人员详情
    async userDetail(userId) {
      const { data: { id, loginName, userType, idCard, phone, name, createTime, email, sex, reason, checkStatus }} = await userDetail(userId)
      this.formData = { ...this.formData, id, loginName, userType, idCard, phone, name, createTime, email, sex, reason }
      this.status = checkStatus
      // if (checkStatus !== '2') this.formData.checkStatus = checkStatus
    },
    // 确认
    submitForm() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          const { userType, reason, checkStatus, id } = this.formData
          const data = { userId: id, reason, checkStatus, userType }
          const { message } = await userAudit(data)
          this.msgSuccess(message)
          this.$parent.getList()
          this.cancel()
        }
      })
    },
    // 关闭
    cancel() {
      this.dialogVisible = false
    }
    /* 新增/编辑弹层 end */
  }
}
</script>

